// 封装自定义指令 -- 自动获取焦点
// 封装成一个插件 - 使用vue.use注册
// vue.use 中需要一个install方法

// 自定义指令中有一个inserted方法 用于接收指令绑定的dom和bind
export default {
  install (Vue) {
    Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        // console.log(el)
        // el = el.querySelector('input')
        // console.log(el)
        // // 聚焦元素
        // el.focus()
        // 1、判断当前的node类型 如果是INPUT 或者是TEXTAREA 可以直接绑定focus()
        // 2、如果不是这两种类型 可能是使用第三方组件
        //   在组件内获取当前的input或者textarea
        //   给获取到的el元素绑定focus
        // 3、如果获取不到 直接报错
        if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
          el.focus()
        } else {
          const inp = el.querySelector('input')
          const textArea = el.querySelector('textarea')
          if (inp || textArea) {
            inp && inp.focus()
            textArea && textArea.focus()
          } else {
            console.error('请把v-focus用在输入框标签上')
          }
        }
      }
    })
  }
}
